<script setup lang="ts">
import { imagePath, imagePathOnly } from '@/libs/file-utils'
import { showHelpMask } from './data'

const help_gif = imagePathOnly('quiz/mbti/detail/help.gif')
const btn_bg_short = imagePath('quiz/mbti/detail/btn-bg-short.png')
</script>

<template>
  <MaskWrapper v-model:show="showHelpMask">
    <div
      class="help-mask"
      @click.stop=""
    >
      <image
        class="help"
        :src="help_gif"
      />

      <div class="tip">点击所选择答案程度进行答题</div>

      <div
        class="confirm"
        :style="{ backgroundImage: btn_bg_short }"
        @click="showHelpMask = false"
      >确定</div>
    </div>
  </MaskWrapper>
</template>

<style lang="less" scoped>
.help-mask {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 594rpx;

  box-sizing: border-box;
  padding: 64rpx 0 32rpx;

  border-radius: 36rpx;
  background-color: #fff;

  display: flex;
  flex-direction: column;
  align-items: center;

  .help {
    width: 466rpx;
    height: 198rpx;
  }

  .tip {
    margin: 64rpx 0 46rpx;

    font-size: 40rpx;
    text-align: center;
  }

  .confirm {
    width: 278rpx;
    height: 104rpx;

    color: #fff;
    text-align: center;
    font-size: 48rpx;
    line-height: 96rpx;
  }
}
</style>